<template>
  <div style="margin:1px 3px">
    <div>{{item.stitle}}</div>
    <div id="showrank" style="width: 100vw;height:40vh;"></div>
    <van-row>
      <van-col class="headcol" span="10">{{item.snamearr[0]}}</van-col>
      <van-col class="headcol" span="10">{{item.snamearr[1] + '(' + item.measurearr[0] + ')'}}</van-col>
      <van-col class="headcol" span="4">排名</van-col>
    </van-row>
    <van-row v-for="(itemdata,index) in item.value0arr" :key="index">
      <van-col class="centercol" span="10">{{item.valuecopyarr[item.value0arr.length -1 - index]}}</van-col>
      <van-col class="centercol" span="10">{{item.value0arr[item.value0arr.length -1 - index].value}}</van-col>
      <van-col class="centercol" span="4">{{item.numberarr[item.value0arr.length -1 - index]}}</van-col>
    </van-row>
  </div>
</template>

<script>
import Vue from 'vue'
import { Col, Row, Toast, Circle } from 'vant'
import * as echarts from 'echarts'
Vue.use(Col).use(Row).use(Circle).use(Toast)
export default {
  name: 'showrank',
  data () {
    return {
      item: this.$route.query.item,
      measure: [],
      finalList: []
    }
  },
  mounted: function () {
    let itemdata = this.item
    //console.log(itemdata)
    if (!itemdata.valuearr) {
      document.getElementById('showrank').innerHTML = '暂无数据'
      return
    }
    var myChart1 = echarts.init(document.getElementById('showrank'))
    // 绘制图表
    myChart1.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '20%'
      },
      legend: {
        data: [itemdata.snamearr[1]]
      },
      xAxis: {
        type: 'value',
        name: itemdata.snamearr[1] + '(' + itemdata.measurearr[0] + ')',
        nameLocation: 'middle',
        nameTextStyle: {
          padding: [13, 13, 13, 13]
        },
        boundaryGap: [0, 0.01],
        minInterval: 1
      },
      yAxis: {
        type: 'category',
        name: itemdata.snamearr[0] + '(公司排名)',
        data: itemdata.valuearr
      },
      series: [
        {
          name: itemdata.snamearr[1],
          type: 'bar',
          data: itemdata.value0arr
        }
      ]
    })
  }
}
</script>

<style>
  .home {
    padding-top: 8vh;
    padding-left: 5vw;
    padding-right: 5vw;
  }
  .centercol {
    text-align:center;
    border: rgb(194, 217, 218) 1px solid;
    font-family: 微软雅黑;
    height: 6vh;
    line-height:6vh;
  }
  .itemcol {
    height: 9vh;
    text-align:center;
  }
  .headcol {
    text-align:center;
    border: rgb(194, 217, 218) 1px solid;
    font-family: 微软雅黑;
    height: 6vh;
    background-color: #DADEEA;
    line-height:6vh;
  }
</style>
